<template>
  <div id="symbolBaseSearch" class="base-search" style="width: 100%">
    <el-form :inline="true" :model="selectData" :label-width="labelWidth">
      <el-form-item
        v-for="(item, index) in cloneConfig"
        :key="index"
        :label="item.label || '标签'"
        style="margin-right: 0.5em"
        :class="item.className || ''"
      >
        <slot v-if="item.slot" :name="item.slot" :row="Model" />
        <component
          :is="item.tag"
          v-else
          v-model="selectData[item.id]"
          :class="item.className"
          :style="item.style || {}"
          :value="selectData[item.id]"
          v-bind="item.attrs || {}"
          :suffix-icon="item.suffixIcon ? item.suffixIcon : ''"
          clearable
          v-on="item.listeners || {}"
        />
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button type="warning" @click="selectChange">查询</el-button>
        <!-- <el-button @click="handleClear">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import BaseSelect from "../BaseSelect/index"
import BaseTree from "../BaseTree/index"
import BaseCascader from "./SampleStatusSelect"
export default {
  name: "BaseSearch",
  components: {
    BaseSelect,
    BaseTree,
    BaseCascader
  },
  props: {
    config: {
      type: Array,
      default: () => []
    },
    searchProp: {
      type: String,
      default: "searchKey"
    },
    sortProp: {
      type: String,
      default: "sortType"
    },
    labelWidth: {
      type: String,
      default: "70px"
    },
    initValue: {
      type: Object,
      default: () => {}
    },
    reset: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchValue: "",
      selectData: {},
      inputWidth: "170px"
    }
  },
  computed: {
    cloneConfig() {
      return this.config.map((item) => {
        const { attrs = {}, ...props } = item
        const others = {}
        if (item.tag === "el-input") {
          others.placeholder = "请输入"
        }
        if (item.tag === "base-select") {
          others.clearable = true
          // others.filterable = true;
          others.remote = true
        }
        return {
          ...props,
          attrs: {
            ...others,
            ...attrs,
            formType: "search"
          }
        }
      })
    }
  },
  watch: {
    initValue: {
      deep: true,
      immediate: true,
      handler(val) {
        this.selectData = {
          ...this.selectData,
          ...this.initValue
        }
      }
    },
    // '$route.query': {
    // 	immediate: true,
    // 	deep: true,
    // 	handler (data) {
    // 		this.selectData = {
    // 			// ...this.initValue,
    // 			...this.getQueryData(),
    // 		}
    // 	}
    // },
    reset: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) this.selectData = {}
      }
    }
  },
  created() {
    this.selectData = {
      ...this.selectData,
      ...this.initValue
    }
  },
  methods: {
    getQueryData() {
      const { query = {} } = this.$route
      const { searchData } = query
      return searchData ? JSON.parse(searchData) : {}
    },
    formatOption(data, config, splitter) {
      switch (Object.prototype.toString.call(config)) {
        case "[object String]":
          return data[config]
        case "[object Array]":
          return config.map((v) => data[v]).join(splitter || " ")
        default:
          throw "config type must be string or array"
      }
    },
    selectChange(data) {
      const values = {}
      Object.keys(this.selectData).forEach((key) => {
        this.selectData[key] = this.selectData[key] ? this.selectData[key] : ""
        if (this.selectData[key] !== "") {
          values[key] = this.selectData[key]
        }
      })
      this.$emit("onSearch", values)
      this.$emit("onChange", values)
    },
    refresh() {
      this.selectData = {
        ...this.initValue
      }
      this.$emit("onSearch", this.selectData)
      this.$emit("onChange", this.selectData)
    }
  }
}
</script>

<style >
#symbolBaseSearch .el-input__inner,
#symbolBaseSearch
  .el-date-editor
  .el-range-editor
  .el-input__inner
  .el-date-editor--daterange
  .el-range-editor--medium,
#symbolBaseSearch input,
#symbolBaseSearch .el-input__icon .el-range__icon .el-icon-date {
  background: transparent !important;
}

.no-label .el-form-item__label {
  width: 0 !important;
}

.no-icon .el-input__inner {
  padding: 0 10px !important;
}
</style>

<style lang="scss">
.base-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // height: 35px;
  padding: 20px 5px 0 5px;
}

.base-search__warp {
  display: flex;
  justify-content: flex-end;
}

.base-search__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.0784313725490196);
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  text-align: center;
  line-height: 33px;
  cursor: pointer;
  font-size: 20px;
  margin-left: 10px;
}

.base-search__icon_active {
  color: #0094ff;
  border-color: #0094ff;
}

.base-search__input-warp {
  height: 35px;
  background: rgba(249, 249, 249, 1);
  border: 1px solid rgba(0, 0, 0, 0.0784313725490196);
  opacity: 1;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(0, 0, 0, 0.4);
  padding: 0 12px;
  margin-left: 10px;
}

.base-search__input {
  height: 100%;
  min-width: 220px;
  background: transparent;
  outline: none;
  border: none;
  overflow: hidden;
  transition: all 0.3s;
}

.base-search__select {
  float: right;
}

.base-breadcrumb {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .base-breadcrumb-btn {
    width: 32px;
    height: 32px;
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f9f9f9;
    color: rgba(0, 0, 0, 0.5);
    margin-right: 16px;
    &.active {
      border: 1px solid #90b8fc;
      color: #90b8fc;
    }
  }
}

.base-search__icon-warp {
  display: flex;
}

.base-search__warp-slot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
